<template>
    <div class="content-card">
        <h2 v-if="title">
            {{ title }}
            <div class="title-slot">
                <slot name="title"></slot>
            </div>
        </h2>
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
/**
 * 卡片组件
 * @prop title 卡片标题
 * @slot default 卡片内容
 * @slot title 卡片标题右边的内容
 * @class sub-title 卡片中定义了副标题的类，如：<h3 class="sub-title">副标题</h3>
 */
defineProps({
    title: {
        type: String,
        default: '',
    },
})
</script>

<style lang="scss">
.content-card {
    padding: $gutter;
    margin: $gutterLarge $gutter 0  $gutter;
    border-radius: 4px;
    background-color: #fff;
    h2 {
        padding-bottom: $gutterSmall;
        margin: 0 0 $gutter;
        border-bottom: 1px solid var(--el-border-color-lighter);
        font-size: 16px;
        color: $primaryTextColor;
        .title-slot {
            float: right;
            margin-top: -$gutterMini;
        }
        .el-button {
            min-width: 107.5px;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    .sub-title {
        display: inline-block;
        line-height: 15px;
        padding-left: 5px;
        margin: 10px 0 15px;
        border-left: 3px solid var(--el-color-primary);
        font-size: 13px;
        font-weight: 700;
    }
}
</style>   
